在前面的文章中，已經學會了如何建立和管理 Supabase 後端服務。今天要介紹的是 Supabase UI Library 能快速建立美觀且功能完整的 Supabase 前端應用。

什麼是 Supabase UI Library

Supabase UI Library 是一套預建的 React 組件和模板，專為 Supabase 應用程式設計。它建立在 shadcn/ui 的基礎上，提供了針對常見但具挑戰性功能的預建解決方案，如身份驗證、檔案上傳和即時更新。這不是一個傳統的 npm 套件，而是一套可以直接複製到專案中的組件和模板。

簡單來說

想像你要蓋房子，shadcn/ui 就像是提供了磚塊、水泥等建材，而 Supabase UI Library 就像是提供了預先設計好的房間模組（客廳套組、廚房套組、浴室套組）。你不用從零開始拼湊每一塊磚，而是直接使用這些經過精心設計的「房間模組」，然後根據需要進行調整。

為什麼要使用 Supabase UI Library

快速開發，專注核心功能：
提供預建的解決方案，讓開發者能專注於應用程式的核心業務邏輯，而不是重複實作常見的 UI 模式。

基於成熟的設計系統：
建立在 shadcn/ui 的基礎上，繼承了其優秀的設計原則和開發體驗。

為什麼選擇建立在 shadcn/ui 之上？

shadcn/ui 簡介

shadcn/ui 是一個革命性的組件庫：

傳統組件庫的問題：

• 需要安裝大型的 npm 套件
• 客製化困難，經常需要覆寫樣式
• 升級時可能破壞現有設計
• 對組件內部實作缺乏控制權

shadcn/ui 的創新做法：

• 不是 npm 套件：而是一套可複製貼上的組件
• 完全可客製化：你擁有組件的完整程式碼
• 基於 Tailwind CSS：使用現代化的 utility-first CSS 框架
• TypeScript 原生支援：提供完整的型別安全
• Radix UI 基礎：建立在可存取性優先的 headless 組件之上

如何使用 Supabase UI Library

如何在 Next.js 專案中設定 Supabase UI Library：

步驟 1：建立 Next.js 專案

npx create-next-app@latest my-supabase-app --typescript --tailwind --eslint
cd my-supabase-app

• --typescript：使用 TypeScript
• --tailwind：使用 Tailwind CSS
• --eslint：使用 ESLint 進行程式碼檢查

步驟 2：初始化 shadcn/ui

npx shadcn@latest init

步驟 3：安裝 Supabase UI Library

# 安裝註冊登入等預建組件
npx shadcn@latest add https://supabase.com/ui/r/password-based-auth-nextjs.json

步驟 4：設定環境變數

建立 .env.local 檔案：

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

如果使用 supabase.com，可以在「Connect」的「App Frameworks」或專案的 API 設定中找到這些值。

如果您使用本地的 Supabase CLI，可以通過運行 supabase start 或 supabase status（如果已經在運行）來找到這些值。

步驟 5：設定電子郵件驗證和重新導向

在 Supabase 控制台中：

啟用電子郵件註冊時，需確認驗證：前往「Authentication」>「Sign In / Providers」> [Auth Providers] >「Email」> [Confirm email]。

設定註冊後的重新導向 URL：前往「Authentication」>「URL Configuration」> 「Redirect URLs」，，例如：
http://localhost:3000/protected。

這樣使用者在註冊後會收到一封驗證郵件，點擊連結後才能完成註冊。會跳轉到設定的 URL 驗證身份路由。

後續文章，會有詳細介紹如何設定電子郵件驗證和其他身份驗證方式。

完成

已經成功設定了 Supabase UI Library 的登入和註冊功能，可以在 Next.js 專案中使用這些預建的組件。

貼心功能

Supabase 甚至提供了 AI 提示詞的快速建立指令，在開發資料庫時，可以建立符合規範的功能。

使用 AI 提示詞

1. 加入編輯器：將提示詞引入你的 AI 編輯器（如 Cline、GitHub Copilot）
2. 智能協助：AI 會自動建議以符合規範或 shadcn/ui 設計的 UI 組件

建立前端組件的提示詞

我自己也建立了一個 AI 提示詞，讓 AI 能夠自動生成符合 shadcn/ui 標準的前端組件

建立 shadcn/ui-component-prompt.md 檔案，內容如下：

# shadcn/ui Component Development Prompt

You are an expert in React, TypeScript, Tailwind CSS, and shadcn/ui components.

## Context
Our Supabase UI library is a set of components built on top of the shadcn/ui registry system. It's designed to make building new or existing Supabase-powered projects faster and easier by providing pre-built solutions for common but challenging features—such as authentication, file uploads, and real-time updates.

## Core Principles
- Always use shadcn/ui components instead of native HTML elements
- 總是使用 Supabase UI 組件而非原生 HTML 元素
- Follow shadcn/ui patterns and conventions
- 遵循 shadcn/ui 的模式和慣例
- Ensure TypeScript type safety throughout
- 確保整體的 TypeScript 型別安全
- Implement proper error handling and loading states
- 實作適當的錯誤處理和載入狀態

## Component Usage Guidelines

### Forms and Inputs
- Use `Input` component for text inputs with proper validation
- 使用 Input 組件處理文字輸入並加上適當驗證
- Use `Button` component with loading states for form submissions
- 使用 Button 組件並為表單提交加上載入狀態
- Wrap forms in `Card` or `Sheet` components for proper layout
- 用 Card 或 Sheet 組件包裝表單以獲得適當佈局

### Authentication Features
- Use pre-built auth components when available
- 盡可能使用預建的認證組件
- Implement proper session management with Supabase client
- 使用 Supabase 客戶端實作適當的會話管理
- Handle auth state changes with proper loading indicators
- 用適當的載入指示器處理認證狀態變更

### Data Display
- Use `Table` component for tabular data with sorting and filtering
- 使用 Table 組件顯示表格資料並支援排序和篩選
- Use `Badge` and `Avatar` components for status and user representation
- 使用 Badge 和 Avatar 組件表示狀態和使用者
- Implement proper pagination for large datasets
- 為大型資料集實作適當的分頁

### Real-time Features
- Integrate Supabase real-time subscriptions with UI updates
- 整合 Supabase 即時訂閱與 UI 更新
- Show connection status and handle reconnection gracefully
- 顯示連線狀態並優雅地處理重新連線
- Use optimistic updates where appropriate
- 在適當的地方使用樂觀更新

## Code Structure Requirements
- Always include proper TypeScript interfaces
- 總是包含適當的 TypeScript 介面
- Implement error boundaries for robust error handling
- 實作錯誤邊界以進行錯誤處理
- Use React hooks for state management (useState, useEffect, custom hooks)
- 使用 React hooks 進行狀態管理
- Follow React best practices for component composition
- 遵循 React 組件組合的最佳實踐

Always ensure the code is production-ready and follows shadcn/ui design patterns.

小結

在接下來文章中，會使用 Supabase UI Library 建立更複雜的功能，包括檔案上傳、即時更新等進階應用。

... to be continued

有任何想討論歡迎留言，或需要指正的地方請鞭大力一點，歡迎訂閱、按讚加分享，分享給想要提升開發效率的朋友~